<template>
  <div class="order_list">
    <header-bar tittle="我的接单" sticky />

    <div class="bg"></div>

    <div class="list-box">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-tabs v-model="active" sticky @click="select">
          <van-tab v-for="item in tabList" :title="item.t">
            <van-list v-model="loading" :finished="finished" @load="onLoad">
              <van-cell
                v-for="item in Alllists"
                :key="item.id"
                @click="reach(item.id)"
              >
                <div class="itemList u-flex-bet">
                  <div class="u-flex">
                    <van-image
                      width="88rem"
                      height="88rem"
                      round
                      :src="item.avatar ? item.avatar : defaults"
                    />
                    <div class="item">
                      <div class="title1">{{ item.job_name }}</div>
                      <div class="title2">{{ item.create_time }}</div>
                    </div>
                  </div>

                  <div class="statu-1" v-if="item.status === 1">待提交</div>
                  <div class="statu-2" v-if="item.status === 2">待确认</div>
                  <div class="statu-3" v-if="item.status === 3">未通过</div>
                  <div class="statu-4" v-if="item.status === 4">维权</div>
                  <div class="statu-5" v-if="item.status === 5">完成</div>
                </div>
              </van-cell>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  List,
  Tab,
  Tabs,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { TASK_ACCEPT_LIST } from "@/api/api.js";

Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "publishList",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      value1: "",
      value2: "",
      active: 0,
      list: [],
      // 下拉
      Alllists: [],
      curId: 0,
      // 下拉
      isLoading: true,
      loading: false,
      finished: false,
      time: 0,
      p: "",
      tabList: [
        { t: "全部", id: "0" },
        { t: "待提交", id: "1" },
        { t: "待确认", id: "2" },
        { t: "未通过", id: "3" },
        { t: "维权", id: "4" },
        { t: "已通过", id: "5" },
      ],
      defaults: require("../.././assets/images/avator.png"),
    };
  },
  filters: {
    fliterKind(msg) {
      switch (msg) {
        case 1:
          return "待提交";
          break;
        case 2:
          return "待确认";
          break;
        case 3:
          return "未通过";
          break;
        case 4:
          return "维权";
          break;
        case 5:
          return "完成";
          break;
      }
    },
  },
  mounted() {
    this.getAllList(0);
  },
  methods: {
    onLoad() {
      console.log(this.time);
      this.loading = false;
      if (this.time != 0) {
        let that = this;
        that.LoadList(that.p);
      }
    },
    select(param) {
      let id = this.tabList[param].id;
      this.getAllList(id);
      this.curId = id;
    },
    async getAllList(id) {
      const { data } = await this.$reqGet(TASK_ACCEPT_LIST, {
        type: id,
      });
      if (data.status == 1) {
        let list = data.data.list;
        let p = data.data.nextPage.value;
        this.p = p;
        this.Alllists = list;
        this.time = 1;
        this.loading = false;
        this.finished = false;
      }
    },
    async LoadList(p) {
      this.loading = true;
      if (p) {
        const { data } = await this.$reqGet(TASK_ACCEPT_LIST, {
          category: this.curId,
          p: p,
        });
        if (data.status == 1) {
          let list = data.data.list;
          let p = data.data.nextPage.value ? data.data.nextPage.value : false;
          this.p = p;
          this.Alllists = this.Alllists.concat(list);
          this.loading = false;
        }
      } else {
        this.finished = true;
      }
    },

    reach(id) {
      this.$router.push({ name: "jiedan", query: { id: id } });
    },
    onRefresh() {
      let id = this.curId;
      this.getAllList(id);
      let that = this;
      setTimeout(() => {
        that.isLoading = false;
        that.finished = false;
        that.loading = false;
      }, 1000);
      // that.$nextTick(() => {
      // 	document.querySelector('#list').scrollTop = 0;
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.order_list {
  min-height: 100vh;
  background-color: #f5f5f5;

  /deep/ .van-tabs__nav {
    background: transparent;

    .van-tab__text {
      color: #fff;
    }

    .van-tab--active {
      font-weight: bold;
      font-size: 32rem !important;
    }

    .van-tabs__line {
      bottom: 46rem;
      width: 28rem;
      height: 8rem;
      border-radius: 4rem;
      background-color: #fff;
    }
  }

  .bg {
    height: 200rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .list-box {
    padding: 24rem;

    .van-cell {
      border-radius: 20rem;
      margin-bottom: 24rem;

      .itemList {
        .item {
          margin-left: 34rem;

          .title1 {
            font-size: 32rem;
            font-weight: bold;
          }

          .title2 {
            color: #cccfd4;
            font-size: 20rem;
          }
        }

        .statu {
          &-1 {
            color: #999999;
          }

          &-2 {
            color: #999999;
          }

          &-3 {
            color: #ff4343;
          }

          &-4 {
            color: #999999;
          }

          &-5 {
            color: #09c6cd;
          }
        }
      }
    }
  }
}
</style>
